<template>
    <div class="box-card">
        <div class="card-header">
            <span>{{ curRouteName }}</span>
        </div>
        <div class="box-content">
            <el-row>
                <el-col :span="12" :xs="24" :sm="18" :md="18" :lg="8" :xl="8">
                    <el-form ref="form" :model="formData" :rules="formRules" label-width="120px" label-position="right">
                        <el-form-item label="IP地址" prop="ipAddress">
                            <el-input v-model="formData.ipAddress"></el-input>
                        </el-form-item>
                        <el-form-item label="设备子网掩码" prop="subnetMask">
                            <el-input v-model="formData.subnetMask"></el-input>
                        </el-form-item>
                        <el-form-item label="默认网关" prop="defaultGateway">
                            <el-input v-model="formData.defaultGateway"></el-input>
                        </el-form-item>
                        <el-form-item label="MAC地址" prop="macAddress">
                            <el-input v-model="formData.macAddress"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm">确定</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { ref, computed } from 'vue'
//获取路由对象
let $route = useRoute()
// 计算出当前路由名称
let curRouteName = computed(() => {
    return $route.matched[$route.matched.length - 1].meta.title
})

const form = ref(null)
const formData = ref({
    ipAddress: '',
    subnetMask: '',
    defaultGateway: '',
    macAddress: '',
});

// 自定义校验函数：验证正确的 IP 地址
const validateIPAddress = (rule, value, callback) => {
    const ipRegex = /^((25[0-5]|2[0-4]\d|[01]?\d{1,2})\.){3}(25[0-5]|2[0-4]\d|[01]?\d{1,2})$/;
    if (!ipRegex.test(value)) {
        callback(new Error('请输入正确的 IP 地址'));
    } else {
        callback();
    }
};

// 自定义校验函数：验证正确的设备子网掩码
const validateSubnetMask = (rule: any, value: string, callback: any) => {
    const subnetMaskRegex = /^(254|252|248|240|224|192|128|0)\.0\.0\.0$|^255\.(254|252|248|240|224|192|128|0)\.0\.0$|^255\.255\.(254|252|248|240|224|192|128|0)\.0$|^255\.255\.255\.(254|252|248|240|224|192|128|0)$/;
    if (!subnetMaskRegex.test(value)) {
        callback(new Error('请输入正确的设备子网掩码'));
    } else {
        callback();
    }
};

// 自定义校验函数：验证正确的默认网关
const validateDefaultGateway = (rule: any, value: string, callback: any) => {
    const defaultGatewayRegex = /^((25[0-5]|2[0-4]\d|[01]?\d{1,2})\.){3}(25[0-5]|2[0-4]\d|[01]?\d{1,2})$/;
    if (!defaultGatewayRegex.test(value)) {
        callback(new Error('请输入正确的默认网关'));
    } else {
        callback();
    }
};

// 自定义校验函数：验证正确的 MAC 地址
const validateMACAddress = (rule: any, value: string, callback: any) => {
    const macAddressRegex = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/;
    if (!macAddressRegex.test(value)) {
        callback(new Error('请输入正确的 MAC 地址'));
    } else {
        callback();
    }
};
const formRules = {
    ipAddress: [
        { required: true, message: 'IP地址不能为空', trigger: 'blur' },
        { validator: validateIPAddress, trigger: 'blur' },
    ],
    subnetMask: [
        { required: true, message: '设备子网掩码不能为空', trigger: 'blur' },
        { validator: validateSubnetMask, trigger: 'blur' },
    ],
    defaultGateway: [
        { required: true, message: '默认网关不能为空', trigger: 'blur' },
        { validator: validateDefaultGateway, trigger: 'blur' },
    ],
    macAddress: [
        { required: true, message: 'MAC地址不能为空', trigger: 'blur' },
        { validator: validateMACAddress, trigger: 'blur' },
    ],
};



const submitForm = () => {
    form.value.validate((valid: boolean) => {
        if (valid) {
            // 表单验证通过，可以进行提交操作
            // ...
        } else {
            // 表单验证不通过，进行错误处理
            return false;
        }
    });
};


</script>

<style scoped lang></style>